<template>
  <bazi-section title="个人八字信息">
    <view class="ganzhi-containter">
      <view class="ganzhi_item" style="background-color: #F0F0F0">
        <view class="ganzhi_title" v-for="(item, index) in shizhu" :key="index">{{ item }}</view>
      </view>
      <view class="ganzhi_item">
        <view class="ganzhi_title">十神</view>
        <text class="ganzhi_content" v-for="(item, index) in baziShishen" :key="index">{{ item }}</text>
      </view>
      <view class="ganzhi_item">
        <view class="ganzhi_title">天干</view>
        <view class="ganzhi_content ganzhi-important" v-for="(item, index) in tiangan" :key="index">
          <view :style="fiveElementInfo(item).color">{{
                  item
                }}</view>
          <image class="element-icon" :src="fiveElementInfo(item).img"></image>
        </view>
      </view>
      <view class="ganzhi_item">
        <view class="ganzhi_title">地支</view>
        <view class="ganzhi_content ganzhi-important" v-for="(item, index) in dizhi" :key="index">
          <view :style="fiveElementInfo(item).color">{{
                  item
                }}</view>
          <image class="element-icon" :src="fiveElementInfo(item).img"></image>
        </view>
      </view>
      <view class="ganzhi_item">
        <view class="ganzhi_title">藏干</view>
        <view class="ganzhi_content ganzhi_content_canggan" v-for="(item, index) in canggan" :key="index">
          <view v-for="(e, i) in (item.split(','))" :style="fiveElementInfo(e).color" :key="i">{{e}}</view>
        </view>
      </view>
      <view class="ganzhi_item">
        <view class="ganzhi_title">
          <view>藏干</view>
          <view>十神</view>
        </view>
        <view class="ganzhi_content ganzhi_content_cangganShishen" v-for="(item, index) in cangganShishen" :key="index">
          <view v-for="(e, i) in item" :key="i">{{ e }}</view>
        </view>
      </view>
      <view class="ganzhi_item">
        <view class="ganzhi_title">星运</view>
        <view class="ganzhi_content" v-for="(item, index) in dishi" :key="index">{{ item }}</view>
      </view>
      <view class="ganzhi_item">
        <view class="ganzhi_title">自坐</view>
        <view class="ganzhi_content" v-for="(item, index) in zizuo" :key="index">{{ item }}</view>
      </view>
      <view class="ganzhi_item">
        <view class="ganzhi_title">纳音</view>
        <view class="ganzhi_content" v-for="(item, index) in nayin" :key="index">{{ item }}</view>
      </view>
      <view class="ganzhi_item">
        <view class="ganzhi_title">空亡</view>
        <view class="ganzhi_content" v-for="(item, index) in kongwang" :key="index">{{ item }}</view>
      </view>
      <view class="ganzhi_item">
        <view class="ganzhi_title">神煞</view>
        <view class="ganzhi_content ganzhi_content_shensha" v-for="(item, index) in shensha"
          :key="index">
          <view v-for="(e, i) in item" :key="i">{{ e }}</view>
        </view>
      </view>
    </view>
  </bazi-section>
</template>
<script>
  import baziSection from './section.vue'
  import wuxingColor from '@/utils/wuxing.js'
  export default {
    components: {
      baziSection
    },
    props: {
      result: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        baziResult: this.result,
        shizhu: ["时间", "年柱", "月柱", "日柱", "时柱"],
        baziShishen: [],
        tiangan: [],
        dizhi: [],
        canggan: [],
        cangganShishen: [],
        dishi: [],
        zizuo: [],
        nayin: [],
        kongwang: [],
        shensha: []
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.baziShishen = [this.baziResult.yearGanShiShen, this.baziResult.monthGanShiShen, this.baziResult
          .dayGanShiShen, this.baziResult.timeGanShiShen
        ];
        this.tiangan = [this.baziResult.yearGan, this.baziResult.monthGan, this.baziResult.dayGan, this.baziResult
          .timeGan
        ];
        this.dizhi = [this.baziResult.yearZhi, this.baziResult.monthZhi, this.baziResult.dayZhi, this.baziResult
          .timeZhi
        ];
        this.canggan = [this.baziResult.yearCangGan, this.baziResult.monthCangGan, this.baziResult.dayCangGan, this
          .baziResult.timeCangGan
        ];
        this.cangganShishen = [this.baziResult.yearZhiShiShen, this.baziResult.monthZhiShiShen, this.baziResult
          .dayZhiShiShen, this.baziResult.timeZhiShiShen
        ];
        this.dishi = [this.baziResult.yearDiShi, this.baziResult.monthDiShi, this.baziResult.dayDiShi, this
          .baziResult.timeDiShi
        ];
        this.zizuo = [this.baziResult.yearZiZuo, this.baziResult.monthZiZuo, this.baziResult.dayZiZuo, this
          .baziResult.timeZiZuo
        ];
        this.nayin = [this.baziResult.yearNaYin, this.baziResult.monthNaYin, this.baziResult.dayNaYin, this
          .baziResult.timeNaYin
        ];
        this.kongwang = [this.baziResult.yearXunKong, this.baziResult.monthXunKong, this.baziResult.dayXunKong, this
          .baziResult.timeXunKong
        ];
        this.shensha = [this.baziResult.yearShenSha, this.baziResult.monthShenSha, this.baziResult.dayShenSha, this
          .baziResult.timeShenSha
        ];
      })
    },
    methods: {
      // 对应五行信息
      fiveElementInfo(str) {
        let {
          color,
          img
        } = wuxingColor.getGanzhiWuxingColorInfo(str);
        return {
          color: `color: ${color}`,
          img: `/static/images/bazi/fortune/${img}`,
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .calendar_containter {
    width: 100%;
    box-sizing: border-box;
  }

  .section {
    width: 100%;
    height: 72rpx;
    color: white;
    background: #C5A680;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10rpx 46rpx;

    .section-title {
      padding-right: 22rpx;
    }

  }

  .ganzhi-containter {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .ganzhi_item {
    display: flex;
    flex-direction: row;
    padding: 4rpx 0;
    width: 100%;
    box-sizing: border-box;
  }

  .ganzhi_title {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #787878;
    font-size: 26rpx;
    line-height: 48rpx;
    width: 25%;
    box-sizing: border-box;
  }

  .ganzhi_content {
    display: flex;
    justify-content: center;
    color: #4b240d;
    font-size: 26rpx;
    line-height: 48rpx;
    width: 25%;
    box-sizing: border-box;
  }

  .ganzhi-important {
    font-size: 32rpx;
    align-items: center;
  }

  .element-icon {
    width: 36rpx;
    height: 36rpx;
  }

  .ganzhi_content_canggan {
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    line-height: 44rpx;
  }
  .ganzhi_content_cangganShishen {
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
  }

  .ganzhi_content_shensha {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
</style>